<template>
  <Layout title="诉求列表" :has-back="true" :has-tabbar="false" ref="layout">
    <view
      style="
        width: 100%;
        height: 100%;
        padding: 20rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
      "
    >
      <view style="flex: 1; min-height: 0">
        <z-paging
          ref="paging"
          v-model="ownerList"
          @query="search"
          :fixed="false"
        >
          <view style="border: 1rpx solid gray">
            <view
              v-for="(owner, index) of ownerList"
              style="border: 1rpx solid gray; padding: 20rpx"
              @tap="ownerTap(owner)"
              :key="owner.uuid"
              hover-class="ownerHover"
            >
              <view
                style="display: flex; flex-direction: column; row-gap: 20rpx"
              >
                <view>序号: {{ index + 1 }}</view>
                <view>姓名: {{ owner.name }}</view>
                <view>组团: {{ owner.groupName }}</view>
                <view>路址: {{ owner.address }}</view>
                <view>类型: {{ owner.homeType }}</view>
                <view style="display: flex">
                  <view> 常住: </view>
                  <view style="margin-left: 20rpx">
                    <u-tag
                      size="mini"
                      :type="getLiveStatus(owner.liveStatus).type"
                      :text="getLiveStatus(owner.liveStatus).text"
                    ></u-tag>
                  </view>
                </view>
                <view style="display: flex">
                  <view> 装修: </view>
                  <view style="margin-left: 20rpx">
                    <u-tag
                      size="mini"
                      :type="getDecorationStatus(owner.decorationStatus).type"
                      :text="getDecorationStatus(owner.decorationStatus).text"
                    ></u-tag>
                  </view>
                </view>
                <view style="display: flex">
                  <view> 欠费: </view>
                  <view style="margin-left: 20rpx">
                    <u-tag
                      size="mini"
                      :type="getOweStatus(owner.oweStatus).type"
                      :text="getOweStatus(owner.oweStatus).text"
                    ></u-tag>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </z-paging>
      </view>
      <view
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 20rpx;
        "
      >
        <u-tag type="primary" :text="`总数: ${total}`" size="large"></u-tag>
      </view>
    </view>
  </Layout>
</template>

<script>
import Layout from "@/pages/component/layout/index.vue";
import { getOwnerByPaginationAndQuestion } from "@/api/owner";

export default {
  components: {
    Layout,
  },
  onLoad(event) {
    this.formData = JSON.parse(event.formData);
  },
  data() {
    return {
      formData: {},
      ownerList: [],
      total: 0,
    };
  },
  methods: {
    ownerTap(owner) {
      let ownerJson = JSON.stringify(owner);
      uni.navigateTo({
        url: `/sub/owner/question/list/detail/index?owner=${ownerJson}`,
      });
    },
    getOweStatus(status) {
      if (status === "1") {
        return {
          type: "error",
          text: "是",
        };
      } else if (status === "2") {
        return {
          type: "success",
          text: "否",
        };
      }
    },
    getLiveStatus(status) {
      if (status === "1") {
        return {
          type: "error",
          text: "是",
        };
      } else if (status === "2") {
        return {
          type: "success",
          text: "否",
        };
      }
    },
    getDecorationStatus(status) {
      if (status === "1") {
        return {
          type: "error",
          text: "是",
        };
      } else if (status === "2") {
        return {
          type: "success",
          text: "否",
        };
      }
    },
    async search(currentPage, pageSize) {
      let result = await getOwnerByPaginationAndQuestion({
        currentPage,
        pageSize,
        ...this.formData,
      });
      this.total = result.data.total;
      this.$refs.paging.complete(
        result.data.list.map((owner) => {
          return {
            ...owner,
            payMonth: JSON.parse(owner.payMonth),
            departmentQuestion: JSON.parse(owner.departmentQuestion),
          };
        })
      );
    },
  },
};
</script>

<style>
.ownerHover {
  background-color: gray;
}
</style>
